<template>
  <div>
    <nav-bar></nav-bar>
    <div class="resource-main clearfix">
      <div class="resource-left">
        <div class="xyd-container">
          <div class="xyd-c-title clearfix">
            <span class="re-info">
              <span>作者：{{source.author}}</span>
              <span>上传：{{source.uploader}}</span>
              <span>浏览：{{source.visit}}次</span>
            </span>
            <span class="title-icon-group">
              <a href="javascript:;" title="收藏" @click="handleCollect">
                <i :class="source.iscollected ? 'xyd-collection_a' : 'xyd-collection2'"></i>
              </a>
              <a href="javascript:;" title="下载" @click="handleDownload">
                <i class="xyd-download2" ></i>
              </a>
              <a href="javascript:;" title="分享" @click="handleShare">
                <i class="xyd-share2" ></i>
              </a>
            </span>
            <input class="url" type="text" :id="'download_url_' + source.id" :value="appOrigin + '#/resource/preview/' + source.id"/>
          </div>
          <div class="xyd-c-content">
            <div class="preview-content">
              <div v-if="type === 'listen'" class="xyd-audio">
                <audio controls>
                  <source :src="source.url">
                </audio>
              </div>
              <object :id="`pdf${id}`" type="application/pdf" :data="source.view_url" style="width:958px;height:700px;margin-top:-49px;">
              </object>
            </div>
          </div>
        </div>
      </div>
      <div class="resource-right">
        <div class="xyd-container">
          <div class="xyd-c-title">猜你喜欢</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="item,i in hot_source" :key="i">
                <a :href="'#/resource/preview/' + item.id">{{item.title}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { preview, collect } from 'api/resource'
import mp3 from 'assets/mock_images/test.mp3'
// import PDFJS from 'utils/pdfjs/src/pdf.js'
// import Pdfjs from 'pdfjs'

export default {
  name: 'resource-preview',
  components: {
    NavBar
  },
  data() {
    return {
      mp3,
      appOrigin: process.env.APP_ORIGIN,
      type: '',
      source: {},
      hot_source: [],
      id: ''
    };
  },
  created() {
    this.routerChange()
    // Pdfjs.getDocument('helloworld.pdf').then(pdf => {
    //   // 用 promise 获取页面
    //   pdf.getPage(1).then(page => {
    //     const scale = 1.5;
    //     const viewport = page.getViewport(scale);

    //     //
    //     //  准备用于渲染的 canvas 元素
    //     //
    //     const canvas = document.getElementById('the-canvas')
    //     const context = canvas.getContext('2d')
    //     canvas.height = viewport.height
    //     canvas.width = viewport.width

    //     //
    //     // 将 PDF 页面渲染到 canvas 上下文中
    //     //
    //     const renderContext = {
    //       canvasContext: context,
    //       viewport
    //     }
    //     page.render(renderContext);
    //   })
    // })
  },
  mounted() {
    const id = this.id
    const pdf = document.getElementById(`pdf${id}`)
    console.log(pdf)
  },
  methods: {
    routerChange() {
      const { id } = this.$route.params
      const { type, content } = this.$route.query
      this.type = type
      if (id === '0') {
        this.source.view_url = content
      } else {
        preview({
          sid: id
        })
        .then(res => {
          this.id = id
          this.source = res.source
          this.hot_source = res.hot_source
        })
        .catch(err => console.log(err))
      }
    },
    handleCollect() {
      const { id, catid, title, price } = this.source
      this.source.iscollected = true
      collect({
        rsid: id,
        cat: catid,
        rsname: title,
        price
      })
      .then(res => console.log(res))
      .catch(() => {
        this.source.iscollected = false
      })
    },
    handleDownload() {
      // this.$emit('preview')
      this.$router.push('/resource/download/' + this.source.id)
    },
    handleShare() {
      const did = document.getElementById('download_url_' + this.source.id)
      did.select()
      document.execCommand('copy', true)
      this.$message({
        message: '资源预览链接已成功复制到剪贴板，快去分享吧~',
        type: 'success'
      })
    }
  },
  watch: {
    '$route'(to, from) {
      this.routerChange()
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.resource-main{
  width: 1200px;
  margin: 0 auto;
  .resource-left{
    width: 960px;
    float: left;
    .xyd-container{
      .xyd-c-title{
        padding: 0 16px;
        font-size: 14px;
        color: #666;
        position: relative;
        z-index: 1;
        .re-info{
          float: left;
          >span{
            margin-right: 20px;
          }
        }
        .title-icon-group{
          float: right;
          width: 100px;
          display: flex;
          justify-content: space-between;
        }
        .url{
          opacity: 0;
          position: absolute;
          z-index: -1;
        }
      }
      .xyd-c-content{
        .xyd-audio{
          width: 100%;
          height: 85px;
          background-color: #f8f8f8;
          position: relative;
          z-index: 2;
          >audio{
            width: 100%;
            height: 60px;
          }
        }
      }
    }
  }
  .resource-right{
    margin-left: 20px;
    width: 210px;
    float: left;
    .xyd-c-content{
      padding: 10px;
      >ul{
        >li{
          line-height: 30px;
          width: 100%;
          word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
          overflow: hidden;//溢出隐藏
          text-overflow: ellipsis;//省略号
          white-space: nowrap;//不换行
          >a{
            &:hover{
              color: #00A2EA;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
</style>